<template>
  <div id="index">
    <el-image
            style="width: 100%; height: 300px"
            :src="url"
            fit="fill"></el-image>
    <div v-if="isReported" class="hint">
      今日已提交
    </div>
    <div v-else class="hint">今日未打卡</div>
    <div class="message">
      <div class="item">
        <div class="question"><span class="required">*</span>1.填报日期</div>
        <div class="answer"><span>{{record.recordTime}}</span></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>2.姓名</div>
        <div class="answer"><span>{{user.name}}</span></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>3.籍贯</div>
        <div class="answer">
          <my-distpicker question_key="nativePlace"
                         :value="record.nativePlace"
                         @saveSelect="saveSelect"></my-distpicker>
        </div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>4.家庭住址</div>
        <div class="answer">
          <my-distpicker question_key="address"
                         :value="record.address"
                         @saveSelect="saveSelect"></my-distpicker></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>5.手机号码</div>
        <div class="answer"><input v-model="record.phone"></input></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>6.紧急联系人</div>
        <div class="answer"><input v-model="record.urgentContactPerson"></input></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>7.紧急联系人联系方式</div>
        <div class="answer"><input v-model="record.urgentContactPhone"></input></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>8.身体状况</div>
        <div class="answer">
          <my-select :options="item_select.health"
                     question_key="health"
                     :value="record.health"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.health !== '良好' && !isNull(record.health)">
        <div class="item">
          <div class="question"><span class="required">*</span>8-1.诊断结果</div>
          <div class="answer">
            <my-select :options="item_select.diagnosticResult"
                       :value="record.diagnosticResult"
                       question_key="diagnosticResult"
                       @saveSelect="saveSelect"></my-select>
          </div>
        </div>
        <div class="item">
          <div class="question"><span class="required">*</span>8-2.处理方式</div>
          <div class="answer">
            <my-select :options="item_select.processingMethod"
                       :value="record.processingMethod"
                       question_key="processingMethod"
                       @saveSelect="saveSelect"></my-select>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="question"><span class="required">*</span>9.{{format_question}}是否到达或途径疫情防控重点地区（以置顶显示的重点地区为准）</div>
        <div class="answer">
          <my-select :options="item_select.isArrivePlace"
                     :value="record.isArrivePlace"
                     question_key="isArrivePlace"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.isArrivePlace == '是'">
        <div class="item">
          <div class="question"><span class="required">*</span>9-1.曾途经以下疫区</div>
          <div class="answer">
            <my-select :options="item_select.whichArea"
                       :value="record.whichArea"
                       question_key="whichArea"
                       @saveSelect="saveSelect"></my-select>
          </div>
        </div>
        <div class="item">
          <div class="question"><span class="required">*</span>9-2.最后离开途经疫区的时间</div>
          <div class="answer">
            <my-date-picker @saveSelect="saveSelect"
                            :value="record.leaveTime"
                            question_key="leaveTime"></my-date-picker>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="question"><span class="required">*</span>10.{{format_question}}是否接触过“近14天出入过疫情重点防控地区”的人员</div>
        <div class="answer">
          <my-select :options="item_select.isTouchPerson"
                     :value="record.isTouchPerson"
                     question_key="isTouchPerson"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.isTouchPerson == '是'">
        <div class="item">
          <div class="question"><span class="required">*</span>10-1.接触“14天出入过疫情重点防控地区的人员”的最后时间</div>
          <div class="answer">
            <my-date-picker @saveSelect="saveSelect"
                            :value="record.touchPersonTime"
                            question_key="touchPersonTime"></my-date-picker>
          </div>
        </div>
        </div>

      <div class="item">
        <div class="question"><span class="required">*</span>11.{{format_question}}是否有接触过疑似病例/确诊病例</div>
        <div class="answer">
          <my-select :options="item_select.isTouchCase"
                     :value="record.isTouchCase"
                     question_key="isTouchCase"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.isTouchCase == '是'">
        <div class="item">
          <div class="question"><span class="required">*</span>11-1.接触疑似病例/确诊病例的最后时间</div>
          <div class="answer">
            <my-date-picker @saveSelect="saveSelect"
                            :value="record.touchCaseTime"
                            question_key="touchCaseTime"></my-date-picker>
          </div>
        </div>
        </div>

      <div class="item">
        <div class="question"><span class="required">*</span>12.是否在莞隔离观察</div>
        <div class="answer">
          <my-select :options="item_select.isIsolation"
                     :value="record.isIsolation"
                     question_key="isIsolation"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.isIsolation !== '否' && !isNull(record.isIsolation)">
        <div class="item">
          <div class="question"><span class="required">*</span>12-1.终止医学观察时间（预计）</div>
          <div class="answer">
            <my-date-picker @saveSelect="saveSelect"
                            :value="record.endObservationTime"
                            question_key="endObservationTime"></my-date-picker>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="question"><span class="required">*</span>13.目前是否在莞</div>
        <div class="answer">
          <my-select :options="item_select.isInDongguan"
                     :value="record.isInDongguan"
                     question_key="isInDongguan"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="record.isInDongguan == '是'">
        <div class="item">
          <div class="question"><span class="required">*</span>13-1.目前所在镇街</div>
          <div class="answer">
            <my-distpicker question_key="town"
                           :value="record.town"
                           @saveSelect="saveSelect"></my-distpicker>
          </div>
        </div>
        <div class="item">
          <div class="question"><span class="required">*</span>13-2.是否在{{format_question}}期间新增返莞</div>
          <div class="answer">
            <my-select :options="item_select.isNewReturn"
                       :value="record.isNewReturn"
                       question_key="isNewReturn"
                       @saveSelect="saveSelect"></my-select>
          </div>
        </div>
      </div>
      <div v-if="record.isInDongguan == '否'">
        <div class="item">
      <div class="question"><span class="required">*</span>13-1.目前所在地址（省/市/区）</div>
      <div class="answer">
        <my-distpicker question_key="nowAddress"
                       :value="record.nowAddress"
                       @saveSelect="saveSelect"></my-distpicker>
      </div>
    </div>
         <div class="item">
      <div class="question"><span class="required">*</span>13-2.返莞计划乘坐的具体航班和时间</div>
      <div class="answer">
        <input v-model="record.transportationLine"></input>
      </div>
    </div>
      </div>

      <div class="item">
        <div class="question"><span class="required">*</span>14.{{format_question}}是否有离莞出行的动作</div>
        <div class="answer">
          <my-select :options="item_select.hasLeaveGuan"
                     :value="record.hasLeaveGuan"
                     question_key="hasLeaveGuan"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div v-if="!isNull(record.hasLeaveGuan) && record.hasLeaveGuan.slice(0,1) == '是'">
    <div class="item">
      <div class="question"><span class="required">*</span>14-1.具体出行时间和地点</div>
      <div class="answer">
        <input v-model="record.leaveLine"></input>
      </div>
    </div>
  </div>
      <div class="item">
        <div class="question"><span class="required">*</span>15.您是否为重点人群</div>
        <div class="answer">
          <my-select :options="item_select.isMainPerson"
                     :value="record.isMainPerson"
                     question_key="isMainPerson"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>16.{{format_question}}同住的家庭成员是否有如下情况</div>
        <div class="answer">
          <my-select :options="item_select.famalySituation"
                     :value="record.famalySituation"
                     question_key="famalySituation"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>17.{{format_question}}曾在以下城市</div>
        <div class="answer">
          <my-select :options="item_select.isInThoseCity"
                     question_key="isInThoseCity"
                     :value="record.isInThoseCity"
                     @saveSelect="saveSelect"></my-select>
        </div>
      </div>
      <div class="item">
        <div class="question">18.备注</div>
        <div class="answer"><input v-model="record.remarks"></input></div>
      </div>
      <div class="item">
        <div class="question"><span class="required">*</span>19.今日体温（摄氏度，准确到小数点后一位，请按国家和学校规定如实填报，37.3以上为异常）</div>
        <div class="answer"><input v-model="record.temperature"></input></div>
      </div>
    </div>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
  import axios from 'axios'
  import {format_today,format_question,item_select} from "./utils";
  import MySelect from "./childCpn/MySelect";
  import MyDatePicker from "./childCpn/MyDatePicker";
  import MyDistpicker from "./childCpn/MyDistpicker";
  export default {
    name: "Index",
    components:{
      MySelect,
      MyDatePicker,
      MyDistpicker
    },
    data(){
      return{
        record:{recordTime:null,nativePlace:null,address:null,
          phone:null,urgentContactPerson:null,urgentContactPhone:null,health:null,
          diagnosticResult:null,processingMethod:null,
          isArrivePlace:null,whichArea:null,leaveTime:null,isTouchPerson:null,touchPersonTime:null,
          isTouchCase:null,touchCaseTime:null,isIsolation:null,endObservationTime:null,
          isInDongguan:null, town:null,isNewReturn:null,
          nowAddress:null,transportationLine:null,hasLeaveGuan:null,leaveLine:null
          ,isMainPerson:null,famalySituation:null,
          isInThoseCity:null,remarks:null,temperature:null},
        user:{},
        url: 'http://quj3ic5hl.hd-bkt.clouddn.com/Snipaste_2021-06-15_14-38-12.png',
        isShow:false,
        isReported : false,
        format_question,
        item_select,
        drawer:false
      }
    },
    created() {
      let params = window.name.split(',')
      // let params = `name: 何妙恒, roleId: 201841412104, role: Student, departmentId: 990, departmentName: 网络空间安全学院`.split(',')
      for(let i in params)
      {
        let item = params[i].split(':')
        this.user[item[0].trim()] = item[1].trim()
      }
      if(!this.isNull(localStorage.getItem('lastRecord'))){
        this.record = JSON.parse(localStorage.getItem('lastRecord'))
      }
      console.log(this.record)
      this.record.recordTime = format_today
      //判断用户账号是否冻结
      axios.get('/api/user/isFreeze?roleId='+this.user.roleId).then(res => {
        if(res.data.status === 201){
          this.$router.push('/loginFail')
        }
      })

      //判断用户是否已经打卡
      axios.get('/api/user/isReportToday?roleId='+this.user.roleId).then(res => {
        console.log(res)
        if(res.data.status === 200){
          this.isReported = true
        }
      })
    },
    methods:{
      saveSelect([key,value]){
        this.record[key] = value
        // this.$set(this.record,key,value)
      },
      isNull(item){
        return !item && typeof(item)!="undefined" && item!=0
      },
      submit() {
        if (this.isReported === true) {
          alert("请勿重复提交")
        } else {
          axios.post('/api/user/report', {...this.record,...this.user}).then(res => {
            if (res.data.status === 200) {
              this.isReported = true
              localStorage.setItem('lastRecord', JSON.stringify(this.record))
              alert("上报成功")
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  #index{
    width: 50%;
    border: 1px solid #cbc6c6;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  .message{
    text-align: left;
    font-size: 20px;
    letter-spacing: 2px;
    margin-left: 20px;
    /*letter-spacing: 8px;*/
  }
  .hint{
    font-size: 20px;
    color: red;
    font-weight: bold;
  }
  .question{
    color: #666;
    margin: 5px;
  }
  .answer{
    width: 95%;
    margin: 20px 0;
    height: 32px;
    line-height: 32px;
    color: #898787;
    border-bottom: 1px solid #d9d5d5;
    padding: 0 0 10px 15px;
    font-size: 18px;
    letter-spacing: 2px;
  }
  input{
    border: none;
    outline: none;
    height: 42px;
    line-height: 2px;
    width: 400px;
    padding: 0;
    color: #898787;;
    font-size: 18px;
  }
  .required{
    color: red;
  }
</style>